<template>
  <div>
    <div id="pietabaaaa" style="height: 300px;margin: 0 auto"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: {
        series: [
          {
            data: [10, 20, 30, 40, 50],
          },
        ],
      },
      num: 900,
      option: {
        // 背景色
        backgroundColor: "#454586",
        // 鼠标悬浮提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(127,150,190,0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            color: "#FFf",
          },
        },
        // 图表填充盒子比例
        grid: {
          left: "20",
          right: "20",
          bottom: "20",
          top: "50",
          containLabel: true,
        },
        // x轴配置
        xAxis: {
          type: "category",
          data: ["婴儿", "小孩", "儿童", "青少年", "青年", "壮年", "中年", "中老年", "老年"],
          // x轴线的样式
          axisLine: {
            lineStyle: {
              color: "rgba(118, 169, 250, .8)",
            },
          },
          // 是否显示x轴刻度尺
          axisTick: {
            show: true,
          },
          // x轴文字配置
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
              if (value.length > 10) {
                return `${value.slice(0, 2)}...`;
              } else {
                return value;
              }
            },
            color: "#fff",
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 5,
          },
        },
        // y轴配置
        yAxis: {
          // // interval: 10,
          type: "value",
          axisTick: {
            show: false,
          },
          // y轴线样式
          axisLine: {
            show: false,
            lineStyle: {
              color: "#DCE2E8",
            },
          },
          // y轴文字样式
          axisLabel: {
            color: "#FFF",
          },
          // y轴每一条横线样式
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(232,230,210,0.13)",
            },
          },
        },

        series: [
          {
            name: "数量",
            // 柱子宽度
            barWidth: 100,
            // 塔尖柱子类型
            type: "pictorialBar",
            barCategoryGap: "0",
            // 必须引入该项
            symbol:
                "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              //barBorderRadius: 5,
              //渐变色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00F6FF",
                },
                {
                  offset: 1,
                  color: "rgba(15, 31, 56, 0)",
                },
              ]),
            },
            // 柱状图上方数据
            label: {
              show: true,
              position: "top",
              color: "#FFF",
            },
            data: [20, 35, 25, 78, 86, 92, 48, 65, 10],
            z: 10,
          },
        ],
      }
    };
  },
  methods: {
    getAnnounceList() {
      this.loading = true;
      this.$ajax.post("/ststistic/hallststisticqicai").then((response) => {
        this.option.xAxis.data = response.data[0]
        this.option.series[0].data = response.data[1]
        let chartDom2 = document.getElementById('pietabaaaa');
        let myChart2 = echarts.init(chartDom2);
        this.option && myChart2.setOption(this.option);

      });
    },
  },
  created() {
    this.getAnnounceList()
  },

};
</script>
